<template>
  <div>
    <!-- 登录表单区域 -->
    <el-form
      ref="loginFormRef"
      :model="empForm"
      :rules="empFormRules"
      label-width="0px"
      class="login_form"
    >
      <!-- 用户名 -->
      <el-form-item prop="logid" label="登录名" label-width="100px">
        <el-input
          placeholder="只能包括字母和数字的登录名"
          @input="checkLogid"
          v-model="empForm.logid"
          prefix-icon="iconfont icon-user"
        ></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item prop="logpwd" label="登录密码" label-width="100px">
        <el-input
          placeholder="输入密码"
          v-model="empForm.logpwd"
          prefix-icon="iconfont icon-3702mima"
          type="password"
        ></el-input>
      </el-form-item>
      <!-- 确认密码 -->
      <el-form-item label="确认密码" prop="logpwd1" label-width="100px">
        <el-input
          placeholder="输入密码"
          v-model="empForm.logpwd1"
          prefix-icon="iconfont icon-3702mima"
          type="password"
        ></el-input>
      </el-form-item>
      <!-- 按钮区域 -->
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    //  确认密码校验
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.empForm.logpwd) {
        console.log('V:' + value)
        console.log(this.empForm.logpwd)
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      // 这是登录表单的数据绑定对象
      empForm: {
        logid: 'admin',
        logpwd: '123456',
        logpwd1: '1234'
      },
      // 这是表单的验证规则对象
      empFormRules: {
        // 验证用户名是否合法
        logid: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        logpwd1: [{ validator: validatePass2, trigger: 'blur' }],
        // 验证密码是否合法
        logpwd: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 判断输入的字符，如果违反约束，则输入内容自动剔除
    checkLogid(value) {
      let c = value.substr(value.length - 1)
      c = c.toLowerCase()
      if ((c >= '0' && c <= '9') || (c >= 'a' && c <= 'z')) {
      } else {
        this.empForm.logid = this.empForm.logid.substring(0, value.length - 1)
        this.$message.error(
          '不应该输入的数据已经被删除了哦，只能包括字母和数字！'
        )
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
